<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表用户信息表</title>
    <meta name="keywords" content="列表用户信息表">
    <meta name="description" content="列表用户信息表">
    <link rel="shortcut icon" href="/web/favicon.ico">
    <link href="/web/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/web/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210202" rel="stylesheet"/>
    <link href="/web/css/animate.min.css" rel="stylesheet"/>
    <link href="/web/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/web/andy/css/ry-ui.css?v=4.6.1" rel="stylesheet"/>
    <a id="scroll-up" href="javascript:void(0);" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/web/js/jquery.min.js"></script>
    <script src="/web/js/bootstrap.min.js"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/web/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/web/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20210202"></script>
    <script src="/web/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/web/ajax/libs/validate/jquery.validate.min.js"></script>
    <script src="/web/ajax/libs/validate/messages_zh.min.js"></script>
    <script src="/web/ajax/libs/validate/jquery.validate.extend.js"></script>
    <!-- jquery-validate 表单树插件 -->
    <script src="/web/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <!-- 遮罩层 -->
    <script src="/web/ajax/libs/blockUI/jquery.blockUI.js"></script>
    <script src="/web/ajax/libs/iCheck/icheck.min.js"></script>
    <script src="/web/ajax/libs/layer/layer.min.js"></script>
    <script src="/web/ajax/libs/layui/layui.js"></script>
    <script src="/web/andy/js/common.js?v=4.6.1"></script>
    <script src="/web/andy/js/andy-ui.js?v=4.6.1"></script>
    <script src="/webjars/vue/2.6.14/vue.min.js"></script>
    <link href="/web/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
    <script src="/web/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>
</head>
<body class="gray-bg">
<div id="container">
    <div class="container-div" >
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="query">
                    <div class="select-list">
                        <ul>
                            <li>
                                登录账号：<input type="text" name="userName" value="" v-model="param.userName"/>
                            </li>
                            <li>
                                用户性别：
                                <select  name="sex" v-model="param.sex">
                                    <option value="-1">全部</option>
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </li>
                            <li>
                                状态：
                                <select  name="status" v-model="param.status">
                                    <option value="-1">全部</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </li>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" @click="add();">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-primary" @click="edit();" :disabled="editDisable">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-warning" @click="deletes();" :disabled="deleteDisable">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>删除
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>

    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="addForm" style="display: none">
        <form class="form-horizontal m" id="form-menu-add">
                        <input type="hidden" v-model="entity.userId"/>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    所属部门
                                </label>
                                <div class="col-sm-7" >

                                    <input v-model="entity.deptId" type="hidden"  class="form-control" name="deptId"  placeholder="部门ID">
                                    <div class="input-group">
                                        <input  type="text" v-model="entity.deptName" class="form-control" name="deptName"  placeholder="请选择所属部门" @click="selectDept();" readonly="true">
                                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    登录账号
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.loginName" type="text"  class="form-control" name="loginName"  placeholder="登录账号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    用户昵称
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.userName" type="text"  class="form-control" name="userName"  placeholder="用户昵称">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    用户类型
                                </label>
                                <div class="col-sm-7" >
                                    <select v-model="entity.userType"  class="form-control" >
                                        <option value="00">系统用户</option>
                                        <option value="01">注册用户</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    用户邮箱
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.email" type="text"  class="form-control" name="email"  placeholder="用户邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    手机号码
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.phonenumber" type="text"  class="form-control" name="phonenumber"  placeholder="手机号码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    用户性别
                                </label>
                                <div class="col-sm-7" >
                                    <select  class="form-control" v-model="entity.sex">
                                        <option value="0">男</option>
                                        <option value="1">女</option>
                                        <option value="2">未知</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" v-if="entity.userId==undefined">
                                <label class="control-label col-sm-3">
                                    密码
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.password" type="password"  class="form-control" name="password"  placeholder="密码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    帐号状态
                                </label>
                                <div class="col-sm-7" >
                                    <select v-model="entity.status" class="form-control">
                                        <option value="0">正常</option>
                                        <option value="1">停用</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-3">
                                    备注
                                </label>
                                <div class="col-sm-7" >
                                    <input v-model="entity.remark" type="text"  class="form-control" name="remark"  placeholder="备注">
                                </div>
                            </div>

            </form>
    </div>
</div>
</body>
<script>
    let index2;
    var userId;
    let vm = new Vue({
        el:'#container',
        data:{
            datas:[],
            param:{
                visible:'',
                sex:'-1',
                status:'-1'
            },
            editDisable: true,
            deleteDisable: true,
            entity:{
                deptId: '',
                userType:'00',
                status:'0',
                sex:'0',
                deptName:''
            }
        },
        methods:{
            edit:function(){
                let rows = $("#bootstrap-table").bootstrapTable('getSelections');
                if ($.common.isEmpty(rows) || rows.length>1) {
                    $.modal.alertWarning("请最多选择一条记录");
                    return;
                }
                $.operate.getNoAlert('/system/user/info/'+rows[0].roleId,function(ret){
                    let data = ret.data;
                    vm.entity=data;
                    $.operate.edit(0,'addForm',doSubmit);
                });

            },
            add:function(){
                vm.menu={};
                $.operate.edit(0,'addForm',doSubmit);
            },
            selectDept:function () {
                index2 = layer.open({
                    type: 2,
                    area: [ '400px','400px'],
                    fix: false,
                    //不固定
                    maxmin: true,
                    shade: 0.3,
                    title: '选择部门',
                    content: '/system/dept/toTree'

                });
            }
        },
        mounted(){
            init();
        }
    });

    function selectRoles(r) {
        userId = r;
        index2 = layer.open({
            type: 2,
            area: [ '400px','400px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '选择角色',
            content: '/system/role/toWin',
            btn: ['确定', '关闭'],
            yes: function(index, layero){
                //按钮【按钮一】的回调
                var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                iframeWin.save();
            }

        });
    }

    function edit_(id){
        $.operate.getNoAlert('/system/user/info/'+id,function(ret){
            let obj = ret.data;
            console.info(JSON.stringify(obj))
            vm.entity=obj;

            if(obj.dept!=null){
                vm.entity.deptId = obj.dept.deptId;
                vm.entity.deptName = obj.dept.deptName;
            }

            $.operate.edit(0,'addForm',doSubmit);

        });

    }
    function changeDept(deptId,deptName) {
        vm.entity.deptId=deptId;
        vm.entity.deptName = deptName;
    }
    function close2() {
        layer.close(index2);
    }
    function deleteById(id){
        layer.confirm("确定删除当前用户吗？",function(){
            $.operate.delete('/system/user/delete/'+id);
        });
    }
    function deletes(){

        let rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if ($.common.isEmpty(rows) || rows.length<1) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        let ids=new Array();
        for(let i=0;i<rows.length;i++){
            ids.push(rows[i].userId);
        }
        $.operate.deletes('/system/user/delete',{"ids":ids});
    }
    function init(){
        var addFlag = false;
        addFlag=true;
        var editFlag = false;
        addFlag=true;
        var removeFlag = false;
        addFlag=true;
        var datas =[];
        var prefix =  "/system/role";
        let options={
            url:'/system/user/data',
            sortable:false,
            modalName:'用户',
            columns:[
                {
                    checkbox : true,
                    align : 'center'
                },

                    {
                        field:'loginName',
                        title:'登录账号',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'userName',
                        title:'用户昵称',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'userType',
                        title:'用户类型',
                        align: 'center',
                        halign: 'center',
                        sortable:true,
                        formatter:function(value, row, index){
                            if(value=='00'){
                                return '<span class=\"label label-info\">系统用户</span>';
                            }else{
                                return '<span class=\"label label-info\">注册用户</span>';
                            }
                        }
                    },
                {
                    field:'dept.deptName',
                    title:'所属部门',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                {
                    field:'role.roleName',
                    title:'所属角色',
                    align: 'center',
                    halign: 'center',
                    sortable:true
                },
                    {
                        field:'email',
                        title:'用户邮箱',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'phonenumber',
                        title:'手机号码',
                        align: 'center',
                        halign: 'center',
                        sortable:true
                    },
                    {
                        field:'sex',
                        title:'用户性别',
                        align: 'center',
                        halign: 'center',
                        sortable:true,
                        formatter:function (value,row,index) {
                            if(value==0){
                                return '<span class=\"label label-info\">男</span>';
                            }
                            if(value==1){
                                return '<span class=\"label label-info\">女</span>';
                            }
                            if(value==2){
                                return '<span class=\"label label-info\">未知</span>';
                            }
                        }
                    },
                    {
                        field:'avatar',
                        title:'头像路径',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'password',
                        title:'密码',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'salt',
                        title:'盐加密',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'status',
                        title:'帐号状态',
                        align: 'center',
                        halign: 'center',
                        sortable:true,
                        formatter:function (value,row,index) {
                            if(value==0){
                                return '<span class=\"label label-success\">启用</span>';
                            }
                            if(value==1){
                                return '<span class=\"label label-danger\">禁用</span>';
                            }
                        }
                    },
                    {
                        field:'delFlag',
                        title:'删除标志（0代表存在 2代表删除）',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'loginIp',
                        title:'最后登录IP',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'loginDate',
                        title:'最后登录时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'pwdUpdateDate',
                        title:'密码最后更新时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'createBy',
                        title:'创建者',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'createTime',
                        title:'创建时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'updateBy',
                        title:'更新者',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'updateTime',
                        title:'更新时间',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                    {
                        field:'remark',
                        title:'备注',
                        align: 'center',
                        halign: 'center',
                            visible: false,
                        sortable:true
                    },
                {
                    title:'操作',
                    width:100,
                    align: 'center',
                    halign: 'center',
                    formatter:function (value,row,index){
                        let actions=[];
                        actions.push("<a href='javascript:void(0)' title='点击设置角色信息' onclick=\"selectRoles('"+row.userId+"')\"><i class=\"glyphicon glyphicon-tower\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' onclick=\"edit_('"+row.userId+"')\" title=\"点击编辑用户信息表\"><i class=\"glyphicon glyphicon-edit\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");
                        actions.push("<a href='javascript:void(0)' title='点击删除用户信息表' onclick=\"deleteById('"+row.userId+"')\"><i class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\"></i></a>&nbsp;&nbsp;");

                        return actions.join("");
                    }
                }
            ]
        }
        $.table.init(options);
    }


    function doSubmit(){
        if($("#form-menu-add").valid()){
            $.operate.post("/system/user/save",JSON.stringify(vm.entity),function(ret){
                layer.closeAll();
            });
        }
    }
</script>

<script>
    $(function(){
        let icon = "<i class='fa fa-times-circle'></i> ";
        $("#form-menu-add").validate({
            rules:{
                userId: "required" , 
                deptId: "required" , 
                loginName: "required" , 
                userName: "required" , 
                userType: "required" , 
                email: "required" , 
                phonenumber: "required" , 
                sex: "required" , 
                avatar: "required" , 
                password: "required" , 
                salt: "required" , 
                status: "required" , 
                delFlag: "required"
            },
            messages:{
                userId: icon + "必填" , 
                deptId: icon + "必填" , 
                loginName: icon + "必填" , 
                userName: icon + "必填" , 
                userType: icon + "必填" , 
                email: icon + "必填" , 
                phonenumber: icon + "必填" , 
                sex: icon + "必填" , 
                avatar: icon + "必填" , 
                password: icon + "必填" , 
                salt: icon + "必填" , 
                status: icon + "必填" , 
                delFlag: icon + "必填" , 
            }
        })
    })

    function refresh(){
        $.table.search();
    }
</script>
</html>
